<template>
  <view class="content">
    <input
      v-model="val"
      :maxlength="maxLen"
      :placeholder="placeholder"
      class="input"
      focus
    />
    <button class="submit" @click="submit">保存</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const val        = ref('')      // 当前输入值
const field      = ref('')      // 字段名（name/address/address2/number）
const maxLen     = ref(50)      // 最大长度
const placeholder= ref('')      // 占位符

onLoad((query) => {
  field.value       = query.field
  val.value         = query.value || ''
  maxLen.value      = parseInt(query.maxLen) || 50
  placeholder.value = query.placeholder || '请输入内容'
})

const submit = () => {
  if (!val.value.trim()) {
    uni.showToast({title: '不能为空', icon: 'none'})
    return
  }
  // 把结果带回去
  uni.$emit('input:confirm', {
    field: field.value,
    value: val.value
  })
  uni.navigateBack()
}
</script>
<style>
	.content{
		width:100%;
		height:100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.input{
		height:80rpx;
		border:solid 1rpx #eee;
		border-radius: 10rpx;
		width:90%;
		margin-bottom: 50rpx;
		padding-left: 20rpx;
		margin-top: 20rpx;
		
	}
	.submit{
		width:91%;
		background-color: #aa0000;
		color:white;
	}
</style>